<template>
  <div class="student">
    <el-card>
      <div class="search">
        <el-form :inline="true">
          <el-form-item label="题目ID：" style="width: 200px;">
            <el-input v-model="params.id" clearable />
          </el-form-item>
          <el-form-item label="年级：">
            <el-select v-model="params.level" placeholder="年级" style="width: 200px;" clearable>
              <el-option label="一年级" :value="1" />
              <el-option label="二年级" :value="2" />
              <el-option label="三年级" :value="3" />
              <el-option label="四年级" :value="4" />
              <el-option label="五年级" :value="5" />
              <el-option label="六年级" :value="6" />
              <el-option label="初一" :value="7" />
              <el-option label="初二" :value="8" />
              <el-option label="初三" :value="9" />
              <el-option label="高一" :value="10" />
              <el-option label="高二" :value="11" />
              <el-option label="高三" :value="12" />
            </el-select>
          </el-form-item>
          <el-form-item label="学科:">
            <el-select v-model="params.subjectId" placeholder="请选择" style="width: 200px;">
              <el-option v-for="item in subjectData" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>
            <el-button type="success" @click="showEdit(``)">添加</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 列表 -->
      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="Id" width="50" />
        <el-table-column prop="subjectId" label="学科" width="150">
          <template v-slot="scope">
            {{ getSubjectName(scope.row.subjectId) }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="createTime" label="创建时间" width="160" />
        <el-table-column label="操作" width="160px">
          <template v-slot="scope">
            <el-button size="small" @click="showEdit(scope.row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div style="margin-top: 20px;">
        <el-pagination v-model:current-page="params.pageIndex" v-model:page-size="params.pageSize"
          :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>


  </div>
</template>

<script setup lang="ts">
import ExamAPI, { PageParams, PageResponse, SubjectResponse } from '@/api/system/exam.api'

let subjectData = ref<SubjectResponse[]>([])
let tableData = ref<PageResponse['list']>([])
let loading = ref(false)
let total = ref(0)
const router = useRouter()

//分页逻辑
const handleSizeChange = (val: number) => {
  params.value.pageSize = val
  getList()
}
const handleCurrentChange = (val: number) => {
  params.value.pageIndex = val
  getList()
}

//初始化参数类型
const params = ref<PageParams>({
  id: null,
  level: null,   //年级
  subjectId: null,  //学科
  pageIndex: 1,  //页码
  pageSize: 10  //每页数量
})

//初始化列表
function getList() {
  loading.value = true
  ExamAPI.getExam(params.value).then(res => {
    // console.log(res);
    tableData.value = res.list
    total.value = res.total
  }).finally(() => {
    loading.value = false
  })
}

//初始化学科
function getSubject() {
  ExamAPI.getSubject().then(res => {
    subjectData.value = res
    console.log(subjectData.value);

  })
}

//学科id转文字
function getSubjectName(id: string | number) {
  const target = subjectData.value.filter(item => item.id == id)[0]
  return `${target.name}(${target.levelName})`
}

//删除功能
function del(id: number) {
  ElMessageBox.confirm(
    '确定要删除吗',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    ExamAPI.delExam(id).then(() => {
      ElMessage({
        message: "删除成功",
        type: 'success',
      })
      getList()
    })
  })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}



//编辑功能
function showEdit(id: string | null) {
  router.push(`paper/edit?id=${id}`)
}

//初始挂载
onMounted(() => {
  getSubject()
  getList()
})
</script>

<style scoped>
.student {
  padding: 16px;
}
</style>
